<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 30px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<template>
      <div class="app-container">
<!--        <el-page-header @back="$router.push({path: '/bill/sellform'})" content="销售订单详情">-->
<!--        </el-page-header>-->
        <div class="rj-wrap">
          <div class="cont-left" id="viewSell" v-loading="loading">
            <div class="cont-box" style="margin-top: 5px;">
              <p class="cont-tit">基础信息</p>
              <div>
                <div class="rj-cell max"><label>订单编号：</label><span>{{baseInfo.code}}</span></div>
                <div class="rj-cell max"><label>申请人：</label><span>{{baseInfo.applyname}}</span> <span>{{baseInfo.departname}}</span></div>
                <div class="rj-cell max"><label>调出库房：</label><span>{{baseInfo.orgname}}</span><span>{{baseInfo.fromsrname}}</span></div>
                <div class="rj-cell max"><label>调入库房：</label><span>{{baseInfo.toorgname}}</span><span>{{baseInfo.tosrname}}</span></div>
                <div class="rj-cell"><label>是否派车：</label><span>{{baseInfo.isSendCar == 1 ? '派车' : '不派车'}}</span></div>
                <div class="rj-cell"><label>调拨重量：</label><span>{{attachUnit(baseInfo.shiftweight, '吨')}}</span></div>
              </div>
              <div class="rj-cell"><label>状态：</label><span>{{baseInfo.statusname}}</span></div>
              <div class="rj-cell"><label>备注：</label><span>{{baseInfo.remark}}</span></div>
              <div class="rj-cell"><label>创建时间：</label><span>{{baseInfo.createtime}}</span></div>
            </div>
            <div class="cont-box">
              <p class="cont-tit">货品明细</p>
              <el-table :data="baseInfo.items" border>
                <el-table-column label="出库库间" align="center" prop="fromshname" />
                <el-table-column label="出库数量" align="center" prop="shiftweight">
                  <template slot-scope="scope">
                    <span v-if="scope.row.shiftweight">{{ scope.row.shiftweight +scope.row.stockunit }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="入库库间" align="center" prop="toshname"/>
                <el-table-column label="入库数量" align="center" prop="unloadweight">
                  <template slot-scope="scope">
                    <span v-if="scope.row.unloadweight">{{ scope.row.unloadweight + scope.row.stockunit }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="货品类型" align="center" prop="typename"/>
                <el-table-column label="产品" align="center" prop="product"/>
                <el-table-column label="规格" align="center" prop="spname"/>
                <el-table-column label="内部价格" align="center" prop="spname">
                  <template slot-scope="scope">
                    <span>{{ scope.row.interSettlPrice +"元/" + scope.row.stockunit }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="qaform.qacode != '' && qaform.qacode != null" class="cont-box">
              <p class="cont-tit">质检信息</p>
              <div class="rj-cell">
                <label>质检单编号：</label>
                <span>{{qaform.qacode}}</span>
              </div>
              <div class="rj-cell">
                <label>抽检数量：</label>
                <span>{{qaform.chkpknum}} 包</span>
                <span> {{qaform.chkwght}} Kg</span>
                <label>合格重量：</label>
                <span> {{qaform.okweight}} Kg</span>
              </div>
              <div class="rj-cell max">
                <label>不合格重量：</label>
                <span> {{qaform.notokweight}} Kg</span>
                <label>不合格率：</label>
                <span> {{qaform.unqualifiedchkrate}}%</span>
              </div>
              <div class="rj-cell max">
                <label>土杂重量：</label>
                <span> {{qaform.soilchkweight}} Kg</span>
                <label>土杂率：</label>
                <span> {{qaform.soilchkrate}}%</span>
              </div>
              <br>
              <div class="rj-cell max">
                <label>合格率：</label>
                <span> {{Number((100-qaform.deductrate)).toFixed(2)}} %</span>
              </div>
              <div class="rj-cell max">
                <label>质检人：</label>
                <span>{{qaform.operatorname}}</span>
                <label>质检时间：</label>
                <span>{{qaform.createdate}}</span>
              </div>
            </div>
            <div class="cont-box" v-if="whoutform != null && whoutform != ''">
              <p class="cont-tit">出库单信息</p>
              <div v-for="(outObj, index) in whoutform">
                <div class="rj-cell">
                  <label>出库单编号：</label>
<!--                  <span>{{outObj.qacode}}</span>-->
                  <span>{{outObj.whoutcode}}</span>
                </div>
                <div class="rj-cell">
                  <label>库房：</label>
                  <span>{{outObj.storeroom}} </span>
                </div>
                <div class="rj-cell">
                  <label>操作人：</label>
                  <span>{{outObj.operator}} </span>
                </div>
                <div class="rj-cell">
                  <label>出库时间：</label>
                  <span>{{outObj.createtime}}</span>
                </div>
<!--                <p style="margin-left: 10px;font-size: 12px;">出库单明细</p>-->
                <el-table :data="outObj.items" border>
                  <el-table-column label="库间" align="center" prop="house" />
                  <el-table-column label="产品" align="center" prop="product" />
                  <el-table-column label="规格" align="center" prop="spename"/>
                  <el-table-column label="数量" align="center" prop="weight">
                    <template slot-scope="scope">
                      <span>{{scope.row.weight + scope.row.stockunit}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="cont-box" v-if="whinform != null && whinform != ''">
              <p class="cont-tit">入库单信息</p>
              <div style="margin-bottom: 10px;" v-for="(outObj, index) in whinform">
                <div class="rj-cell">
                  <label>入库单编号：</label>
                  <span>{{outObj.formno}}</span>
                </div>
                <div class="rj-cell">
                  <label>库房：</label>
                  <span>{{outObj.strname}} </span>
                </div>
                <div class="rj-cell">
                  <label>操作人：</label>
                  <span>{{outObj.operator}} </span>
                </div>
                <div class="rj-cell">
                  <label>入库时间：</label>
                  <span>{{outObj.createdate}} </span>
                </div>
<!--                <p style="margin-left: 10px;font-size: 12px;">入库单明细</p>-->
                <el-table :data="outObj.items" border>
                  <el-table-column label="库间" align="center" prop="house" />
                  <el-table-column label="产品" align="center" prop="product" />
                  <el-table-column label="规格" align="center" prop="spename"/>
                  <el-table-column label="数量" align="center" prop="weight">
                    <template slot-scope="scope">
                      <span>{{scope.row.weight + scope.row.stockunit}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="cont-right">
<!--            <SalesOperationLogs2 :orderid="baseInfo.guid" :srguid="baseInfo.storermguid" :departid="baseInfo.depguid"></SalesOperationLogs2>-->
            <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id" ></FlowNode>
          </div>
        </div>
      </div>
</template>

<script>
    import FlowNode from '@/components/FlowNode/index'
    import {getTransferapply} from "@/api/bill/transferapply";
    let qs = require('qs');
    export default {
        name: 'transferinfo',
        data () {
            return {
              flowid: 28,
              id : '',
              baseInfo: '',
              whoutform: '',
              whinform: '',
              qaform: '',
                isReady: false,
              loading: true
            }
        },
        components: {
          FlowNode,
        },
      computed: {
        packWhoutProducts: function () {
          return this.baseInfo.whoutform ? this.baseInfo.whoutform.items : [];
        },
        whichFlow: function () {
          return this.baseInfo.flowtempguid == 2 ? this.baseInfo.status >= 45 : this.baseInfo.status >= 70;
        }
      },
      created() {
            let that = this;
            this.id = this.$route.query.id;
            this.getOrder(this.id);
        },
        methods: {
          handleClickOutside() {
            this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
          },
          packUnit: function(unit, currency) {
              return unit != undefined && unit != '' ? currency == 2 ? '美元/' : '元/' + unit : '';
          },
          getOrder: function (id) {
            let that = this;
            getTransferapply(id).then(response => {
                  if (response.code == 200) {
                      const data = response;
                      this.baseInfo = data.apply || {};
                      this.whoutform = data.whoutform || {};
                      this.whinform = data.whinform || {};
                      this.qaform = data.qaform || {};
                      this.isReady = true;
                  } else {
                      this.msgError('系统错误');
                  }
              });
            this.loading = false;
          }
        }
    }
</script>
